<template>
  <div class="main">
    <div class="box1">
      <div class="kap1">
        <!-- 卡片一 -->
        <el-card>
          <div>
            <el-icon style="color: #40c9c6"><grid /></el-icon>
          </div>
          <div class="cardbox1">
            <div style="color: #8c8c8c">商品数量</div>
            <div>
              <count-to
                :startVal="0"
                :endVal="data.goodsCount"
                :duration="3000"
              ></count-to>
              <!-- <b style="color: #666666">{{ data.goodsCount }}</b> -->
            </div>
          </div>
        </el-card>
        <!-- 卡片二 -->
        <el-card>
          <div>
            <el-icon style="color: #36a3f7"><chat-dot-square /></el-icon>
          </div>
          <div class="cardbox2">
            <div style="color: #8c8c8c">商品数量</div>
            <div>
              <count-to
                :startVal="0"
                :endVal="data.waitStockCount"
                :duration="3000"
              ></count-to>
            </div>
          </div>
        </el-card>
      </div>
      <div id="columnar" class="kap2"></div>
    </div>
    <!-- 七日成交金额 -->
    <div class="box2">
      <div id="broken"></div>
      <div class="huanx">
        <div id="region"></div>
        <div id="channel"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Grid, ChatDotSquare } from "@element-plus/icons-vue";
import http from "@/http";
import * as echarts from "echarts";
import { CountTo } from "vue3-count-to";
export default {
  components: {
    Grid,
    ChatDotSquare,
    CountTo,
  },
  created() {
    this.echartsData();
  },
  data() {
    return {
      data: "",
      startVal: 0,
    };
  },

  methods: {
    echartsData() {
      let data = {
        _gp: "admin.dashboard",
        _mt: "integral",
      };
      http.get(data).then((res) => {
        this.data = res.data;
        if (this.data) {
          this.orderData();
          this.turnoverData();
          this.regionData();
          this.channelsData();
        }
      });
    },
    //七日订单
    orderData() {
      //基于准备好的dom,初始化echarts实例
      let myChart = echarts.init(document.getElementById("columnar"));
      //屏幕自适应
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      let option;
      option = {
        legend: {
          data: ["订单数"],
        },
        title: {
          text: "7日订单",
          subtext: "订单数",
        },
        xAxis: {
          type: "category",
          data: this.data.daysOrder[0],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数",
            data: this.data.daysOrder[1],
            type: "bar",
            color: "#00C7FF",
            barWidth: 30,
          },
        ],
      };
      //使用刚指定的配置项和数据图表
      option && myChart.setOption(option);
    },
    //七日成交额
    turnoverData() {
      let myChart = echarts.init(document.getElementById("broken"));
      //屏幕自适应
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      let option;
      option = {
        legend: {
          data: ["订单数"],
        },
        title: {
          text: "7日成交金额",
          subtext: "订单数",
        },
        xAxis: {
          type: "category",
          data: this.data.daysSum[0],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数",
            data: this.data.daysSum[1],
            type: "line",
            color: "#20B2AA",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    //订单地区分布
    regionData() {
      let myChart = echarts.init(document.getElementById("region"));
      let option;
      //屏幕自适应
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      option = {
        title: {
          text: "订单地区分布",
        },
        legend: {
          data: ["地区分布"],
        },
        series: [
          {
            name: "地区分布",
            type: "pie",
            radius: "50%",
            data: this.data.area,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    //订单渠道分布
    channelsData() {
      let myChart = echarts.init(document.getElementById("channel"));
      let option;
      //屏幕自适应
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      option = {
        title: {
          text: "订单渠道分布",
        },
        series: [
          {
            name: "地区分布",
            type: "pie",
            radius: "50%",
            data: this.data.channel,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .box1 {
    width: 100%;
    .kap1 {
      width: 30%;
      height: 300px;
      display: inline-block;
      .el-card {
        margin: 50px;
        width: 180px;
        & /deep/.el-card__body {
          display: flex;
          justify-content: space-between;
        }
        .el-icon {
          font-size: 50px;
        }
      }
    }
    .kap2 {
      width: 65%;
      height: 300px;
      display: inline-block;
    }
  }
  .box2 {
    width: 100%;
    height: 500px;
    display: flex;
  }

  .el-card {
    margin: 50px;
    width: 300px;
    & /deep/.el-card__body {
      display: flex;
      justify-content: space-between;
    }
    .el-icon {
      font-size: 50px;
    }
  }
  .huanx {
    width: 60%;
    height: 500px;
    display: inline-block;
  }
  #broken {
    width: 30%;
    height: 400px;
    margin-left: 45px;
    display: inline-block;
  }
  #region {
    width: 50%;
    height: 400px;
    display: inline-block;
  }
  #channel {
    width: 50%;
    height: 400px;
    display: inline-block;
  }
  @media screen and (max-width: 1244px) {
    .cardbox1 {
      display: none;
    }
    .cardbox2 {
      display: none;
    }
  }
  @media screen and (max-width: 1124px) {
    .el-card {
      width: 50px;
    }
    .box2 {
      display: block;
    }
    #broken {
      width: 100%;
      height: 400px;
      display: block;
    }
    .huanx {
      display: block;
    }
  }
  @media screen and (max-width: 1098px) {
    #region {
      width: 100%;
    }
    #channel {
      width: 100%;
    }
  }
}
</style>
